import { FC, useMemo, useState } from 'react';
import { Button, Skeleton } from 'antd';
import useFetchMonitorInfoSwr from '@/hooks/swr/useFetchMonitorInfoSwr';
import useFetchGroupSwr from '@/hooks/swr/useFetchGroupSwr';
import { useFetchMinerSwr } from '@/hooks/swr/useFetchMinerSwr';
import styles from './minerDtIndex.module.less';
import AutoRefreshSwitch from '@/components/auto-refresh-switch/AutoRefreshSwitch';
import MinerDtCard from '@/page-compoennt/miner-dt/MinerDtCard';
import Cell from '@/components/cell/Cell';
import CopyAble from '@/components/copy-able/CopyAble';
import formatRTime from '@/utils/format/formatRTime';
import formatMemory from '@/utils/format/formatMemory';
import formatCpuMaxTemperature from '@/utils/format/formatCpuMaxTemperature';
import InternetStatusIcon from '@/components/internet-status-icon/InternetStatusIcon';
import CardStatusBlock from '@/components/card-status-block/CardStatusBlock';
import MinerStatusIcon from '@/components/miner-status-icon/MinerStatusIcon';
import MinerNameEdit from '@/components/miner-name-edit/MinerNameEdit';
import MinerNameEditModal from '@/components/miner-name-edit/MinerNameEditModal';
import GroupDropDown from '@/page-compoennt/miner/moveToGroupAndMoreHandle/GroupDropDown';
import MoreHandleDropDown from '@/page-compoennt/miner/moveToGroupAndMoreHandle/MoreHandleDropDown';
import { DownOutlined } from '@ant-design/icons';
import CoinIcon from '@/components/coin-icon/CoinIcon';
import formatShortWallet from '@/utils/format/formatShortWallet';

interface IMinerDtIndexProps {
  mac: string;
  mid: number;
}

const MinerDtIndex: FC<IMinerDtIndexProps> = (props) => {
  const { mac, mid } = props;

  const [fetchParam, setFetchParam] = useState({
    page: 1,
    limit: 1,
    status: -1,
    search: mac,
    mid,
    gid: undefined,
    order: '',
  });
  const [isAutoRefresh, setIsAutoRefresh] = useState(false);
  const { data: groupPageModel } = useFetchGroupSwr(mid, undefined);
  const { data: monitorPageModel } = useFetchMonitorInfoSwr(mid);
  const {
    data: minerPageModel,
    error,
    isValidating,
    mutate,
  } = useFetchMinerSwr(
    mid,
    groupPageModel,
    monitorPageModel,
    undefined,
    fetchParam,
    isAutoRefresh,
  );
  const [curEditMiner, setCurEditMiner] = useState({
    name: '',
    mac: '',
    mid: -1,
  });

  const [nameEditModalVisible, setNameEditModalVisible] = useState(false);

  const BaseInfoFooter = useMemo(() => {
    return () => {
      return (
        <div
          id="minerDtBaseInfoFooter"
          className={`flex ai-center jc-end ${styles.baseInfoBtnWrap}`}
        >
          <Button size="small" type="primary">
            显卡列表
          </Button>
          <GroupDropDown
            groupModel={groupPageModel}
            miners={[mac]}
            containerId="minerDtBaseInfoFooter"
            mutateMiner={mutate}
          >
            <Button size="small" type="primary">
              移动至
              <DownOutlined />
            </Button>
          </GroupDropDown>
          <MoreHandleDropDown
            miners={[mac]}
            banMinerDt={true}
            mid={mid}
            mutateMiner={mutate}
          >
            <Button size="small" type="primary">
              更多操作
              <DownOutlined />
            </Button>
          </MoreHandleDropDown>
        </div>
      );
    };
  }, [groupPageModel, mac, mid, mutate]);

  if (!minerPageModel) {
    return (
      <div>
        <Skeleton paragraph={{ rows: 10 }} active={true} />
        <Skeleton paragraph={{ rows: 10 }} active={true} />;
        <Skeleton paragraph={{ rows: 10 }} active={true} />;
      </div>
    );
  }
  const miner = minerPageModel.minerList[0];
  const openMinerNameEdit = (name: string, mac: string, mid: number) => {
    setCurEditMiner({ name, mac, mid });
    setNameEditModalVisible(true);
  };

  return (
    <div className={styles.minerDt}>
      <div className={`flex ai-center ${styles.mainTitle}`}>
        <div className={`flex-1 ${styles.mainTitleText}`}>矿机详情</div>
        <AutoRefreshSwitch
          checked={isAutoRefresh}
          handleAutoRefreshChange={setIsAutoRefresh}
          loading={isValidating}
        />
      </div>

      <MinerDtCard title="基础信息" footer={<BaseInfoFooter />}>
        <>
          <Cell
            title="矿机名"
            value={
              <MinerNameEdit
                name={miner.name}
                onClick={() =>
                  openMinerNameEdit(miner.name, miner.mac, miner.mid)
                }
              />
            }
          />
          <Cell
            title="状态"
            value={<MinerStatusIcon status={miner.status} />}
          />
          <Cell title="IP地址" value={<CopyAble text={miner.ip} />} />
          <Cell title="MAC地址" value={<CopyAble text={miner.mac} />} />
          <Cell title="显卡" value={miner.card} />
          <Cell
            title="显卡概况"
            borderBottom
            value={<CardStatusBlock cards={miner.cards} />}
          />
        </>
      </MinerDtCard>

      <MinerDtCard title="算力信息">
        <>
          <Cell title="所属分组" value={groupPageModel?.currentGroup?.name} />
          <Cell
            title="主币"
            value={
              <div className={`flex ai-center`}>
                <CoinIcon coin={miner.coin} />
                <span>{miner.coin}</span>
              </div>
            }
          />
          <Cell title="主币总算力" value={miner.hashFormat} />
          <Cell title="辅币" value={miner.sc_coin || '无'} />
          <Cell title="辅币总算力" value={miner.scHashFormat || '无'} />
          <Cell title="挖矿程序" value={miner.kernel} />
          <Cell
            title="钱包地址"
            value={
              miner.wallet.length ? (
                <CopyAble
                  text={miner.wallet}
                  showText={formatShortWallet(miner.wallet)}
                />
              ) : (
                '无'
              )
            }
          />

          <Cell title="有效份额" value={miner.accept} />
          <Cell title="拒绝率" value={miner.reject} />
        </>
      </MinerDtCard>

      <MinerDtCard title="系统信息">
        <>
          <Cell title="运行时长" value={formatRTime(miner.rtime)} />
          <Cell title="系统镜像" value={miner.kernel_ver_name} />
          <Cell title="CPU占用(%)" value={miner.cpu_usage} />
          <Cell title="内存占用(%)" value={miner.mem_usage} />
          <Cell
            title="互联网连接"
            value={<InternetStatusIcon status={miner.internet} />}
          />
          <Cell
            title="CPU温度"
            value={formatCpuMaxTemperature(miner.cpu_temperature) + '℃'}
          />
          <Cell title="内存总容量" value={formatMemory(miner.memory_size)} />
          <Cell title="CPU核心数" value={miner.core_num} />
          <Cell title="重启次数" value={formatMemory(miner.restart)} />
          <Cell
            title="重启内核次数"
            value={formatMemory(miner.reboot_kernel_cnt)}
          />
        </>
      </MinerDtCard>
      <MinerNameEditModal
        mid={curEditMiner.mid}
        mac={curEditMiner.mac}
        nameStr={curEditMiner.name}
        visible={nameEditModalVisible}
        setVisible={setNameEditModalVisible}
        afterEdit={() => mutate()}
      />
    </div>
  );
};

export default MinerDtIndex;
